<template>

    <div class="my-4">
        <container>
            <ul class="w-full">
                <li class="border flex items-center h-40" v-for="(course, index) in courses" :key="index">
                    <!--checkbox-->
                    <div class="px-4 text-xl">
                        <i class="i-radix-icons:checkbox" v-if="true"></i>
                        <i class="i-carbon:checkbox" v-else></i>
                    </div>
                    <!--课程头图-->
                    <div class="py-2">
                        <div class="w-35 h-30 bg-center bg-cover" :style="{ backgroundImage: `url(${course.image})` }">

                    </div>
                    </div>
                    <div class="flex-1 flex flex-col items-start border-r-1 h-full justify-between py-3 px-4">
                        <!--标题-->
                        <div class="text-xl">{{ course.title }}</div>
                       <div>
                         <!--老师，标签-->
                        <div class="text-sm">{{ course.teacher }}|{{ course.tag }}</div>
                        <!--购买用户，更新信息-->
                        <div class="text-sm">{{ course.count }}人购买|已更新：{{ course.progress }}</div>
                       </div>
                    </div>
                    <!--价格-->
                    <div class="border-r-1 h-full px-4 flex items-center px-4">￥{{ course.price }}</div>
                    <!--操作-->
                    <div class="flex items-center justify-center">
                        <!--delete-->
                        <span class="text-red-500">删除</span>
                        <!--favorite-->
                    </div>
                </li>
            </ul>
        </container>
    </div>

</template>

<script setup lang="ts">
import bg from '@/assets/images/bg.png'
interface CartItemType {
    image: string,
    teacher: string,
    tag: string,
    count: number,
    progress: string,
    price: string,
    title: string
}

interface CarType {
    courses: CartItemType[]
}

withDefaults(defineProps<CarType>(),{
    courses:()=>[
        {
            image:bg,
            title:'',
            teacher:'',
            tag:'',
            count:1000,
            price:'999.00',
            progress:'10/20'

        }
    ]
})
</script>

<style scoped></style>